<template>
  <div class="task-handle">
    <div :class="['task-handle-inner',reportType==5?'h-489':'h-535']">
      <div class="title">
        任务处理
        <i class="ic_close" @click="close"></i>
      </div>
      <div class="switch" v-if="this.data.taskType!=3">
        <el-radio v-model="reportType" label="5">完成</el-radio>
        <el-radio v-model="reportType" label="2" v-show="this.data.progress!=1&&this.data.taskType!=3">申请延期</el-radio>
      </div>
      <div class="switch" v-if="this.data.taskType==3">
        <el-radio v-model="warning" label="false">正常</el-radio>
        <el-radio v-model="warning" label="true">异常</el-radio>
      </div>
      <div class="content">
        <div class="delay-time" v-if="reportType==2">
          <span v-if="this.data.taskType==2">{{new Date(data.limitTime).Format('yyyy-MM-dd hh:mm')}} 至</span>
          <span v-else>{{new Date(data.limitTime).Format('yyyy-MM-dd')}} 至</span>
          <el-date-picker v-if="this.data.taskType==2"
            v-model="delay_time" :picker-options="pickerOptionsStart"
            type="datetime"
            placeholder="设定延期时间">
          </el-date-picker>
          <el-date-picker v-else
                          v-model="delay_time" :picker-options="pickerOptionsStart"
                          type="date"  default-time="'['23:59:59']'"
                          placeholder="设定延期时间">
          </el-date-picker>
        </div>
        <div class="textarea">
          <el-input
            resize="none"
            type="textarea"
            placeholder="请输入汇报内容"
            v-model="textarea">
          </el-input>

        </div>
      </div>
      <div class="annex-list" v-if="this.data.taskType!=3">
        <vuescroll :ops="ops">
          <ul>
            <li class="add-annex" @click="addAnnexFn">
              <i class="add"></i>
              添加附件
            </li>
            <li class="add-annex" v-for="(item,index) in upload_picture_list" :key="'img'+index">
              <div class="img" :style="{backgroundImage: 'url(' + item.url + ')' }"></div>
              <i class="icon-del" @click="delAnnexImg(index)"></i>
            </li>
            <li class="add-annex" v-for="(item,index) in upload_video_list" :key="'video'+index">
              <i class="video-icon"></i>
              {{item.name}}
              <i class="icon-del" @click="delAnnexVideo(index)"></i>
            </li>
            <li class="add-annex" v-for="(item,index) in upload_file_list" :key="'file'+index">
              <i :class="item.type"></i>
              {{item.name}}
              <i class="icon-del" @click="delAnnexFile(index)"></i>
            </li>
          </ul>
        </vuescroll>
        <input ref="upload-file" @change="choose_verify_file" type="file" style="display: none" multiple/>
      </div>
      <div class="btn">
        <span @click="submit">提交</span>
      </div>
    </div>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'

  export default {
    name: "TaskHandle",
    components: {
      vuescroll
    },
    props: {
      data: {}
    },
    data() {
      return {
        warning:'false',
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '10px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        reportType: '5',//5:完成 2：申请延期  汇报类型
        textarea: '',
        delay_time: '',//延期时间
        upload_picture_list: [],//
        upload_file_list: [],//
        upload_video_list: [],//
        pickerOptionsStart: {},
      }
    },
    created() {
      console.log(this.data);
      let start=/\d{4}-\d{1,2}-\d{1,2}/g.exec(this.data.limitTime)[0];
      this.pickerOptionsStart={
        disabledDate (date) {
          let startdate = new Date(start) - 86400000;
          return date && date.valueOf()< startdate;
        },
      }
    },
    methods: {
      // /**
      //  * 拆分文件类型
      //  */
      choose_verify_file() {
        let _this = this,
          upload_file = _this.$refs['upload-file'],
          file_list = upload_file.files;
        for (let item of file_list) {
          //判断是否为付费用户
          if (_this.$store.state.userInfo.payUser != true) {
            if (item.type.indexOf('image') == -1) {
              _this.$message.error("此功能是高级版专有，请联系商务升级版本，谢谢");
              return;
            }
          }
          let list_length = 1;//文件个数
          //判断文件大小
          if (item.size > _this.upload_file_max_size) {
            _this.$message.error('文件：' + item.name + '太大了，请选择2M以下的附件重新上传');
            continue;
          }

          if (item.type.indexOf('image') !== -1) {
            //文件类型为图片
            list_length += _this.upload_picture_list.length;
            if (list_length > 9) {
              _this.$message.error('图片只能上传9个以内，请删除后再上传');
              continue;
            }
            _this.upload_picture_list.push({
              'file': item,
              'url': window.URL.createObjectURL(item),
              'name': (item.name || '').intercept_characters()
            });
            console.log(_this.upload_picture_list)
          } else if (item.type.indexOf('video') !== -1) {
            //文件类型为视频
            list_length += _this.upload_video_list.length;
            if (list_length > 2) {
              _this.$message.error('视频只能上传2个以内，请删除后再上传');
              continue;
            }
            _this.upload_video_list.push({
              'file': item,
              'url': window.URL.createObjectURL(item),
              'name': (item.name || '').intercept_characters()
            })
          } else {
            //文件类型为其他的
            list_length += _this.upload_file_list.length;
            if (list_length > 5) {
              _this.$message.error('附件只能上传5个以内，请删除后再上传');
              continue;
            }
            let suffix_str = item.name.substr(item.name.length - 4, 4),
              _type = suffix_str.indexOf('doc') !== -1 ? 'word-icon' :
                (suffix_str.indexOf('xls') !== -1 ? 'xlsx-icon' : (
                  suffix_str.indexOf('ppt') !== -1 ? 'ppt-icon' : (
                    suffix_str.indexOf('txt') !== -1 ? 'txt-icon' : (
                      suffix_str.indexOf('pdf') !== -1 ? 'pdf-icon' : 'default-icon'
                    )
                  )));
            _this.upload_file_list.push({
              'file': item,
              'url': window.URL.createObjectURL(item),
              'type': _type,
              'name': (item.name || '').intercept_characters()
            })
          }
        }
      },
      //添加附件方法
      addAnnexFn() {
        let _this = this;
        this.$refs['upload-file'].click();
      },
      delAnnexImg(index) {
        this.upload_picture_list.splice(index, 1);
      },
      delAnnexVideo(index) {
        this.upload_video_list.splice(index, 1);
      },
      delAnnexFile(index) {
        this.upload_file_list.splice(index, 1);
      },
      close() {
        this.$emit("close");
      },
      //任务处理
      submit() {
        if (this.textarea == '') {
          this.$message.error('请输入内容');
          return;
        }
        if (this.reportType == 5) {
          //完成
        } else if (this.reportType == 2 && this.delay_time == '') {
          //申请延期
          this.$message.error('请选择延期申请时间');
          return;
        }
        let formdata = new FormData();
        //延期申请接口、任务完结的接口
        let params = {
          userId: this.$store.state.userInfo.userId,
          taskId: this.data.taskId,
          content: this.textarea,//内容
          delayTime: this.delay_time,
          reportType: this.reportType,
          warning:this.warning,
        };
        formdata.append('warning', params.warning);
        formdata.append('userId', params.userId);
        formdata.append('taskId', params.taskId);
        if(this.data.taskType==1&&this.reportType == 2){
          //里程碑任务 申请延期
          console.log('里程碑任务 申请延期');
          params.delayTime=params.delayTime.Format('yyyy-MM-dd')+' 23:59:59';
          formdata.append('delayTime',params.delayTime);
        }else if (this.reportType == 2&&this.data.taskType!=1) {
          console.log('不是里程碑任务 申请延期');
          formdata.append('delayTime', params.delayTime.Format('yyyy-MM-dd hh:mm:ss'));
        }
        formdata.append('reportType', params.reportType);
        formdata.append('content', params.content);
        if (this.upload_picture_list.length && this.upload_picture_list.length > 0) {
          this.upload_picture_list.map(function (item) {
            formdata.append('photo', item.file, item.name);
          });
        }
        if (this.upload_file_list.length && this.upload_file_list.length > 0) {
          this.upload_file_list.map(function (item) {
            formdata.append('file', item.file, item.name);
          });
        }
        if (this.upload_video_list.length && this.upload_video_list.length > 0) {
          this.upload_video_list.map(function (item) {
            formdata.append('video', item.file, item.name);
          });
        }
        this.$http.post('task/report/completeReport', formdata).then(res => {
          if (res.statusCode == 200) {
            let _this = this;
            this.$message.success('提交成功');
            this.$emit("end");
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .task-handle {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;

    .task-handle-inner {
      width: 626px;
      background-color: #ffffff;
      border-radius: 6px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      padding: 0 31px;

      .title {
        line-height: 78px;
        height: 78px;
        color: #454A55;
        font-size: 16px;
        position: relative;

        i {
          position: absolute;
          width: 16px;
          height: 17px;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url("../../assets/img/close_icon.png");
          right: 0;
          top: 31px;
          cursor: pointer;
        }
      }

      .switch {
        padding-bottom: 32px;
      }

      .content {
        .delay-time {
          padding-bottom: 16px;
          font-size: 14px;
          color: #96A2AA;
        }

        .textarea {

        }
      }

      .annex-list {
        height: 150px;
        padding: 5px 0;

        ul {
          display: flex;
          flex-wrap: wrap;
          padding: 10px 0;

          li {
            width: 100px;
            height: 100px;
            border: 1px solid #EEEEEE;
            text-align: center;
            font-size: 12px;
            padding-top: 68px;
            box-sizing: border-box;
            color: #96A2AA;
            position: relative;
            margin: 0 16px 16px 0;

            i {
              position: absolute;
              width: 20px;
              height: 20px;
              top: 30px;
              left: 40px;
              background-image: url("../../assets/img/annex/ic_ty.png");
            }

            i.add {
              background-image: url("../../assets/img/annex/ic_add.png");
            }

            i.word-icon {
              background-image: url("../../assets/img/annex/ic_word.png");
            }

            i.pdf-icon {
              background-image: url("../../assets/img/annex/ic_pdf.png");
            }

            i.txt-icon {
              background-image: url("../../assets/img/annex/ic_txt.png");
            }

            i.xlsx-icon {
              background-image: url("../../assets/img/annex/ic_excel.png");
            }

            i.ppt-icon {
              background-image: url("../../assets/img/annex/ic_ppt.png");
            }

            i.video-icon {
              background-image: url("../../assets/img/annex/ic_video.png");
            }

            i.icon-del {
              background-image: url("../../assets/img/annex/ic_delete.png");
              width: 16px;
              height: 16px;
              position: absolute;
              left: 90px;
              top: -5px;
            }
          }

          .add-annex {
            cursor: pointer;
            position: relative;

            > .img {
              position: absolute;
              left: 0;
              top: 0;
              display: block;
              width: 100px;
              height: 100px;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              /*border-radius: 6px;*/
            }
          }
        }

      }

      .btn {
        position: absolute;
        right: 32px;
        bottom: 32px;
        text-align: right;

        > span {
          display: inline-block;
          width: 88px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background-color: #0755DB;
          border-radius: 6px;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }

    .h-489 {
      height: 489px;
    }

    .h-535 {
      height: 535px;
    }
  }
</style>
<style type="text/scss" lang="scss">
  .textarea {
    .el-textarea__inner {
      padding: 24px 25px;
      background-color: #F2F6F9;
      border-radius: 6px;
      border: none;
      height: 160px;
    }
  }

  .delay-time {
    .el-input__inner {
      border: none !important;
    }
  }
</style>
